<script lang="ts">
import router from '@/router';
import { billStore } from '../stores/bill'
import { ref } from 'vue';
import { watch } from 'vue';
import { showToast } from 'vant';
import 'vant/es/toast/style'

export default {
    setup() {
        const goPage = () => {
            router.back();
        }

        let money: any = ref(null); // 金额

        watch(money, (newvalue: any, oldvalue) => {
            let reg = /^(\d{0,9})(\.(\d{0,2}))?$/g;
            if (!reg.test(newvalue)) {
                money.value = oldvalue;
            } else {
                money.value = newvalue;
            }
        })

        let genre: any = ref(null);

        const type = (str: string) => { // 选择类型
            genre.value = str;
        }

        let costname: any = ref(null); // 费用名称

        let remark: any = ref(null); // 备注



        let save = () => {
            if (money.value == null) {
                showToast('请输入金额');
                return;
            } else if (genre.value == null) {
                showToast('请选择类型');
                return;
            } else if (costname.value == null) {
                showToast('请输入费用名称');
                return;
            } else {
                let piniabill: any = billStore().$state.bill;
                piniabill.push(
                    {
                        money: money.value,
                        genre: genre.value,
                        costname: costname.value,
                        remark: remark.value,
                        timer: new Date().getFullYear() + "." + (new Date().getMonth() + 1) + "." + new Date().getDate() + " " + new Date().getHours() + ":" + new Date().getMinutes()
                    }
                )
                showToast('保存成功');
                router.push('/billrecord')
            }
        }

        return {
            goPage,
            money,
            type,
            genre,
            costname,
            remark,
            save,
        }
    }
}
</script>

<template>
    <div class="billtally">
        <div class="billtally_title">
            <img src="../assets/images/billdatail/com_taobao_nb_sdk_web_view_title_bar_back.9.png" @click="goPage">
            记账
        </div>
        <!-- 背景图片 -->
        <img src="../assets/images/billtally/bg_deco_diary_enter_price_green.png">

        <div class="billtally_con">
            <div class="billtally_inp">
                ￥
                <input type="number" v-model="money">
            </div>
            <div class="billtally_con_list">
                <div :class="['billtally_con-icon', genre == '建材' ? 'active' : '']" @click="type('建材')">
                    <div class="image"><img src="../assets/images/billtally/ic_deco_diary_build.png"></div>
                    建材
                </div>
                <div :class="['billtally_con-icon', genre == '人工' ? 'active' : '']" @click="type('人工')">
                    <div class="image"><img src="../assets/images/billtally/ic_deco_diary_labor.png"></div>
                    人工
                </div>
                <div :class="['billtally_con-icon', genre == '家具' ? 'active' : '']" @click="type('家具')">
                    <div class="image"><img src="../assets/images/billtally/ic_deco_diary_furniture.png"></div>
                    家具
                </div>
                <div :class="['billtally_con-icon', genre == '电器' ? 'active' : '']" @click="type('电器')">
                    <div class="image"><img src="../assets/images/billtally/ic_deco_diary_device.png"></div>
                    电器
                </div>
                <div :class="['billtally_con-icon', genre == '其他' ? 'active' : '']" @click="type('其他')">
                    <div class="image"><img src="../assets/images/billtally/ic_deco_diary_other.png"></div>
                    其他
                </div>
            </div>
        </div>

        <div class="billtally_item">
            费用名称
            <input type="text" placeholder="请填写费用名称" v-model="costname">
        </div>
        <div class="billtally_item">
            备注
            <input type="text" placeholder="请填写备注信息 非必填" v-model="remark">
        </div>

        <!-- 保存 -->
        <div class="save"><span @click="save">保存信息</span></div>
    </div>
</template>


<style lang="scss" scoped>
.billtally {
    position: relative;

    &>img {
        width: 100%;
        height: 200px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }
}

.billtally_title {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    margin-bottom: 5px;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: transparent;

    img {
        position: absolute;
        top: 0;
        left: 12px;
        margin-top: 10px;
        width: 20px;
        height: 20px;
    }
}

.billtally_con {
    margin: 0px 12px;
    margin-bottom: 10px;
    padding: 5px 8px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 1px 4px #e3e3e3;

    .billtally_inp {
        margin-top: 15px;
        padding-bottom: 10px;
        padding-left: 10px;
        border-bottom: 1px solid #e3e3e3;
        display: flex;
        align-items: center;

        input {
            width: 100%;
            height: 100%;
            font-size: 24px;
            border: none;
        }
    }

    .billtally_con_list {
        margin-top: 10px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }

    .billtally_con-icon {
        display: flex;
        flex-direction: column;
        padding-bottom: 8px;
        text-align: center;
        color: #999;
        font-size: 14px;

        .image {
            margin-bottom: 10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-align: center;
            display: block;
            background-color: #f6f6f6;

            img {
                margin: 10px;
                width: 30px;
                height: 30px;
                display: block;
            }
        }

        &.active {
            color: #21afa9;

            .image {
                background-color: #21afa9;
            }
        }
    }
}

.billtally_item {
    margin: 0px 12px;
    padding: 15px 0px;
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #999;
    color: #999;

    input {
        margin-left: 10px;
        flex: 1;
        text-align: right;
        border: none;
    }

    input::-webkit-input-placeholder {
        color: #999;
    }
}

.save {
    position: absolute;
    bottom: -300px;
    left: 0;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;

    span {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #21afa9;
        color: #fff;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
    }
}

.van-popup {


    & :deep(.van-toast__text) {
        text-align: center !important;
    }

}
</style>